* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

@font-face {
    font-family: "liShu";
    src        : url("../fonts/SIMLI.TTF");
}

@font-face {
    font-family: 'fs-light';
    src        : url("../fonts/仿宋细.TTF");
}

@font-face {
    font-family: 'fs-weight';
    src        : url("../fonts/仿宋粗.ttf");
}

a {
    text-decoration: none;
}

.nav {
    height          : 6rem;
    background-color: black;
    overflow        : hidden;

    .logo {
        float: left;
    }

    .content,
    .righter {
        margin-top: 1rem;
    }

    .content {
        width     : 50%;
        height    : 100%;
        text-align: center;
        float     : left;

        a:first {
            margin-left: 10rem;
        }

        a,
        .middle {
            margin-right  : 2.5rem;
            margin-left   : 2.5rem;
            vertical-align: bottom;
        }

        a {
            font-size: 1.3rem;
            color    : white;

            &:hover {
                color: #eec530;
            }
        }

        .middle {
            height: 2.5rem;
        }
    }

    .righter {
        float     : right;
        height    : 100%;
        width     : 24rem;
        // outline: solid 1px white;

        input,
        .search,
        .user {
            vertical-align: middle;
        }

        input {
            display         : inline;
            height          : 2.5rem;
            width           : 14rem;
            background-color: transparent;
            border-radius   : 1rem;
            border          : solid 3px;
            border-color    : #494545;
            outline         : none;
            color           : whitesmoke;
            text-indent     : 1em;
            font-size       : 1rem;


            &:active {
                outline: none;
            }
        }

        .search {
            height         : 1.6rem;
            margin-right   : 2.5rem;
            margin-left    : 0.2rem;
            opacity        : 0.8;
            color          : whitesmoke;
            cursor         : pointer;
            // outline     : solid 1px white;
        }

        .user {
            width     : 2.3rem;
            // outline: solid 1px white;
        }
    }
}

.banner {
    width           : 100%;
    height          : 39rem;
    overflow        : hidden;
    background-color: green;
    position        : relative;

    .item {
        position        : relative;
        width           : 100%;
        height          : 100%;
        background-color: black;

        .bg,
        .titleImg,
        .btn {
            position: absolute;
        }

        .bg {

            width     : 100%;
            margin-top: -6rem;
        }

        .titleImg {
            left     : 50%;
            transform: translateX(-50%);
        }

        .btn {
            width : 16rem;
            right : 5rem;
            bottom: 2rem;
        }
    }

    .dotList {
        @dotWidth    : 1rem;
        width        : 100%;
        height       : @dotWidth;
        position     : absolute;
        bottom       : 0;
        margin-bottom: 1rem;
        text-align   : center;

        .dot {
            width           : @dotWidth;
            height          : @dotWidth;
            margin-left     : .8 * @dotWidth;
            margin-right    : .8 * @dotWidth;
            border-radius   : 100rem;
            display         : inline-block;
            background-color: #b5b5b5;
        }

        .active {
            background-color: #fff;
        }
    }
}

.main {
    // height          : 1000rem;
    padding-bottom: 3rem;

    .intro {
        width : 80%;
        height: 35rem;
        margin: 0 auto;

        .left,
        .right {
            height  : 100%;
            width   : 50%;
            position: relative;
            float   : left;
        }

        .left {

            .title,
            .content {
                margin-left: 4rem;
            }

            .title {
                height     : 12rem;
                margin-top : 4rem;
                margin-left: -2rem;

                img,
                h1 {
                    float: left;
                }

                img {
                    width: 8rem;
                }

                h1 {
                    font-size  : 2.5rem;
                    margin-top : 2rem;
                    font-family: 'lishu';
                    line-height: 1.5em;
                }
            }

            .content {
                width         : 80%;
                line-height   : 2em;
                font-size     : 1.1rem;
                letter-spacing: 0.18em;
            }

            .sub {
                height          : 8rem;
                width           : 100%;
                margin-top      : 4rem;
                padding-top     : 3rem;
                position        : absolute;
                bottom          : 0;
                background-color: #191919;
                text-align      : center;

                a {
                    display    : block;
                    float      : left;
                    width      : 5rem;
                    height     : 1.8rem;
                    line-height: 1.8rem;
                    font-size  : 0.9rem;

                    color           : white;
                    outline         : none;
                    border          : none;
                    box-sizing      : content-box;
                    padding-left    : 1.2rem;
                    padding-right   : 1.2rem;
                    padding-top     : 0.2rem;
                    padding-bottom  : 0.2rem;
                    box-shadow      : 0px 2px 5px #eec530;
                    background-color: transparent;
                    border-radius   : 100rem;
                    cursor          : pointer;

                    &:nth-child(1) {
                        margin-left: 80px;
                    }
                }

                .b2 {
                    margin-left : 3rem;
                    margin-right: 3rem;
                }
            }

        }

        .right {
            background-color: transparent;
            position        : relative;

            .imgSwiperBox {
                overflow     : hidden;
                margin-top   : 2rem;
                width        : 90%;
                height       : 75%;
                // outline   : solid 5px;

                .showImg {
                    // 这里一改动，js里也要跟着改动
                    width: 100%;
                }
            }


            .buttonArea {
                width           : 16rem;
                height          : 8rem;
                left            : 0;
                bottom          : 18%;
                margin-left     : -4rem;
                position        : absolute;
                background-color: #fff;

                .rightBtn,
                .leftBtn {
                    width   : 3.5rem;
                    position: absolute;
                    cursor  : pointer;
                }

                .leftBtn {
                    top      : 2rem;
                    left     : 6rem;
                    transform: rotate(180deg);
                }

                .rightBtn {
                    top  : 2.3rem;
                    right: 1rem;
                }
            }

            .subicon {
                width            : 90%;
                height           : 3rem;
                position         : absolute;
                bottom           : 0;
                text-align       : right;
                // outline       : solid 1px;
                vertical-align   : middle;

                img {
                    width         : 2.6rem;
                    margin-left   : 5rem;
                    // outline    : solid 1px;
                }
            }
        }
    }

    .information {
        width           : 80%;
        height          : 35rem;
        margin          : 0 auto;
        margin-top      : 4rem;
        background-color: #fff;

        .left,
        .mid,
        .right {
            height: 100%;
            float : left;
        }

        .left {
            width: 30%;

            img {
                height   : 90%;
                // border: solid 10px;
            }
        }

        .mid {
            width   : 40%;
            position: relative;

            .titleArea {
                text-align   : center;
                margin-bottom: 2rem;

                .titleIcon,
                span {
                    vertical-align: middle;
                }

                .titleIcon {
                    width: 4rem;
                }

                .title {
                    font-size     : 3.5rem;
                    letter-spacing: 0.1em;
                    font-weight   : 600;
                    font-family   : 'lishu';
                }

                .right-icon {
                    transform: rotateY(180deg);
                }
            }

            .mainContint {
                font-size     : 1.1rem;
                letter-spacing: 0.18em;
                line-height   : 2em;
            }

            .moreBtn {
                position: absolute;
                right   : 2rem;
                bottom  : 1rem;
                width   : 3.6rem;
            }
        }

        .right {
            width   : 30%;
            position: relative;

            .year {
                // width       : 1rem;
                position      : absolute;
                right         : 0.5rem;
                top           : 5rem;
                letter-spacing: 1rem;
                writing-mode  : tb-rl;

                span {
                    letter-spacing: 0;
                }
            }

            .show {
                position: absolute;
                right   : 0;
                bottom  : 0;
                width   : 95%;
            }
        }
    }

    .forum {
        width           : 80%;
        @margintop      : 4rem;
        height          : 60rem + @margintop * 3;
        margin          : 0 auto;
        background-color: #fff;

        .left,
        .right {
            float : left;
            height: 100%;
        }

        .left {
            width   : 25%;
            position: relative;

            .bigTitle {
                width        : 6rem;
                font-size    : 5rem;
                transform    : translateY(50%);
                margin-left  : 2rem;
                line-height  : 8rem;
                text-shadow  : 2px 2px 5px #eec530;
                // box-shadow: 
            }

            .btn {
                position        : absolute;
                right           : 2rem;
                width           : 8rem;
                height          : 2.5rem;
                margin-bottom   : 2rem;
                color           : #ffdf59;
                background-color: #111111;
                cursor          : pointer;
                box-shadow      : 2px 2px 3px #ffdf59;
                text-align      : left;
                text-indent     : 1em;
                line-height     : 2.5rem;
                border-radius   : 1rem;

                img {
                    position   : absolute;
                    right      : -5%;
                    top        : -20%;
                    // outline : solid 1px;
                }
            }

            .hotFirstBtn {
                top: 6rem;
            }

            .timeFirstBtn {
                top: 12rem;
            }

            .upBtn,
            .downBtn {
                position: absolute;
                left    : 12rem;
                width   : 3.6rem;
            }

            .upBtn {
                top: 52.5rem;
            }

            .downBtn {
                top: 58.5rem;
            }
        }

        .right {
            width           : 75%;
            background-color: #2d2d39;

            .white {
                width           : 40%;
                float           : left;
                height          : 100%;
                background-color: white;
            }

            .item {
                width     : 100%;
                height    : 20rem;
                margin-top: 3rem;

                position: relative;

                .hot {
                    position: absolute;
                    left    : 2rem;
                    top     : 1rem;
                    z-index : 20;

                    img,
                    span {
                        vertical-align: middle;
                    }

                    img {
                        width          : 1.5rem;
                        margin-right   : 0.5rem;
                        // outline     : solid 1px wheat;
                    }

                    span {
                        font-size: 1.2rem;
                        color    : white;
                    }
                }

                .show {
                    position: absolute;
                    left    : 16px;
                    height  : 80%;
                    z-index : 10;
                }

                .textArea {
                    position         : absolute;
                    right            : 60px;
                    top              : 1rem;
                    height           : 90%;
                    width            : 50%;
                    padding-left     : 3.5rem;
                    padding-right    : 3rem;
                    padding-top      : 0.5rem;
                    background-size  : 90%;
                    background-repeat: no-repeat;
                    background-image : url("../img/index/bg.png");
                    z-index          : 20;

                    h2 {
                        font-size  : 1.4rem;
                        font-family: 'fs-weight';
                    }

                    .data {
                        margin-top: 1rem;

                        img,
                        span {
                            vertical-align: middle;
                        }

                        img {
                            width: 1.8rem;
                        }

                        span {
                            margin-right: 1rem;
                        }

                        text-align : center;
                    }

                    hr {
                        margin-top   : 0.5rem;
                        margin-bottom: 0.5rem;
                        width        : 80%;
                        margin-left  : 2rem;
                    }

                    p {
                        line-height  : 1.5em;
                        padding-left : 2rem;
                        padding-right: 2rem;
                        font-family  : 'fs-light';
                    }

                    .more {
                        width   : 3rem;
                        position: inherit;
                        right   : 3rem;
                        bottom  : 0.6rem;
                    }
                }
            }
        }
    }
}